<!DOCTYPE html>
<html>
<head>
    <title>PC遥控器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }

        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px;
            padding-bottom: 0;
            margin: 0;
        }

        .remote-container {
            width: 100%;
            max-width: 400px;
            padding: 20px;
            background: rgba(42, 42, 42, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            margin: 0 auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            overflow: visible;
            animation: glow 3s infinite;
            margin-bottom: 0;
        }

        .power-container {
            display: none;
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 300;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: linear-gradient(45deg, #fff, #888);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            justify-content: center;  /* 改为居中对齐 */
            align-items: center;
            position: relative;  /* 添加相对定位 */
        }

        h2 button {
            position: absolute;  /* 绝对定位 */
            top: 50%;  /* 垂直居中 */
            transform: translateY(-50%);  /* 垂直居中偏移 */
            text-transform: none !important;
            background-clip: initial !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: white !important;
        }

        .fullscreen-button {
            left: 0;  /* 靠左对齐 */
            min-width: 80px;  /* 稍微减小宽度 */
            height: 36px;  /* 稍微减小高度 */
            padding: 0 16px;
            background: linear-gradient(145deg, #444, #555);
            color: white !important;
            border: none;
            border-radius: 18px;
            font-size: 14px;
            text-transform: none !important;
            letter-spacing: 0;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
        }

        .fullscreen-button:active {
            transform: scale(0.95);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(145deg, #555, #666);
        }

        .touchpad {
            width: 100%;
            height: 300px;
            background: linear-gradient(145deg, #333, #444);
            border-radius: 15px;
            margin: 15px 0;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .touchpad-area {
            flex: 1;
            position: relative;
            background: linear-gradient(145deg, #444, #555);
            touch-action: none;
            border-radius: 15px 15px 0 0;
        }

        .touchpad-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            background: rgba(51, 51, 51, 0.8);
            backdrop-filter: blur(5px);
        }

        .touchpad-button {
            padding: 10px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(145deg, #555, #666);
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            letter-spacing: 1px;
            outline: none;  /* 移除轮廓 */
            -webkit-tap-highlight-color: transparent;  /* 移除移动端点击高亮 */
        }

        .touchpad-button:active {
            transform: translateY(2px) scale(0.98);  /* 添加缩放效果 */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(145deg, #666, #777);
        }

        .media-controls, .volume-controls, .seek-controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin: 12px 0;
        }

        .control-button {
            padding: 12px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(145deg, #444, #555);
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            letter-spacing: 1px;
            outline: none;  /* 移除轮廓 */
            -webkit-tap-highlight-color: transparent;  /* 移除移动端点击高亮 */
        }

        .control-button:active {
            transform: translateY(2px) scale(0.98);  /* 添加缩放效果 */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(145deg, #555, #666);
        }

        .power-button {
            right: 0;  /* 靠右对齐 */
            min-width: 80px;  /* 稍微减小宽度 */
            height: 36px;  /* 稍微减小高度 */
            padding: 0 16px;
            background: linear-gradient(145deg, #cc0000, #ff0000);
            color: white !important;
            border: none;
            border-radius: 18px;
            font-size: 14px;
            text-transform: none !important;
            letter-spacing: 0;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
            outline: none;  /* 移除轮廓 */
            -webkit-tap-highlight-color: transparent;  /* 移除移动端点击高亮 */
        }

        .power-button:active {
            transform: scale(0.95);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(145deg, #ff0000, #cc0000);
        }

        .section-title {
            color: #888;
            margin: 8px 0;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 300;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .icon {
            font-size: 20px;
        }

        /* 添加动画效果 */
        @keyframes glow {
            0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
            50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }
            100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); }
        }

        /* 全屏时的样式 */
        body:fullscreen .remote-container,
        body:-webkit-full-screen .remote-container,
        body:-moz-full-screen .remote-container,
        body:-ms-fullscreen .remote-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
        }

        /* 添加全局按钮样式 */
        button {
            -webkit-tap-highlight-color: transparent;  /* 移除所有按钮的点击高亮 */
            outline: none;  /* 移除所有按钮的轮廓 */
            user-select: none;  /* 防止文本被选中 */
            -webkit-user-select: none;  /* Safari 支持 */
        }

        .keyboard {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            background: #2a2a2a;
            padding: 8px 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }
        
        .keyboard.active {
            display: block;
        }
        
        .keyboard-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            gap: 3px;
            max-width: 100%;
        }
        
        .keyboard-key {
            background: #444;
            color: white;
            border: none;
            padding: 15px 2px;  /* 增加垂直高度，减少水平宽度 */
            border-radius: 4px;
            font-size: 12px;  /* 减小字体大小 */
            min-width: 20px;  /* 减小最小宽度 */
            cursor: pointer;
            flex: 1;
            text-align: center;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .keyboard-key:active {
            background: #555;
        }
        
        .keyboard-key.wide {
            flex: 1.2;
        }
        
        .keyboard-key.space {
            flex: 3;
            padding: 15px 2px;
        }
        
        .keyboard-toggle {
            position: static;  /* 移除固定定位 */
            bottom: auto;
            right: auto;
            background: linear-gradient(145deg, #444, #555);
            color: white;
            border: none;
            padding: 12px;  /* 统一padding */
            border-radius: 10px;  /* 统一圆角 */
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .keyboard-toggle:active {
            transform: translateY(2px) scale(0.98);  /* 统一按压效果 */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(145deg, #555, #666);
        }
    </style>
</head>
<body>
    <div class="remote-container">
        <h2>
            <button class="fullscreen-button" onclick="toggleFullscreen()">全屏</button>
            PC遥控器
            <button class="power-button" onclick="handlePower('sleep')">休眠</button>
        </h2>
        
        <div class="section-title">
            触控板
        </div>
        <div class="touchpad">
            <div id="touchpad-area" class="touchpad-area"></div>
            <div class="touchpad-buttons">
                <button class="touchpad-button" onclick="handleClick('single')">左键</button>
                <button class="touchpad-button" onclick="handleClick('right')">右键</button>
                <button class="touchpad-button" onclick="toggleKeyboard()">键盘</button>
            </div>
        </div>

        <div class="section-title">音量控制</div>
        <div class="volume-controls">
            <button class="control-button" onclick="handleVolume('down')">音量-</button>
            <button id="muteButton" class="control-button" onclick="toggleMute()">静音</button>
            <button class="control-button" onclick="handleVolume('up')">音量+</button>
        </div>

        <div class="section-title">媒体控制</div>
        <div class="media-controls">
            <button class="control-button" onclick="handleMedia('prev')">上一个</button>
            <button class="control-button" onclick="handleMedia('play_pause')">播放</button>
            <button class="control-button" onclick="handleMedia('next')">下一个</button>
        </div>

        <div class="section-title">快进/后退</div>
        <div class="seek-controls">
            <button class="control-button" onclick="handleSeek('backward')">后退</button>
            <button class="control-button" onclick="handleSeek('forward')">快进</button>
        </div>

        <!-- 添加键盘区域 -->
        <div class="keyboard" id="keyboard">
            <div class="keyboard-row">
                <button class="keyboard-key" onclick="sendKey('esc')">Esc</button>
                <button class="keyboard-key" onclick="sendKey('1')">1</button>
                <button class="keyboard-key" onclick="sendKey('2')">2</button>
                <button class="keyboard-key" onclick="sendKey('3')">3</button>
                <button class="keyboard-key" onclick="sendKey('4')">4</button>
                <button class="keyboard-key" onclick="sendKey('5')">5</button>
                <button class="keyboard-key" onclick="sendKey('6')">6</button>
                <button class="keyboard-key" onclick="sendKey('7')">7</button>
                <button class="keyboard-key" onclick="sendKey('8')">8</button>
                <button class="keyboard-key" onclick="sendKey('9')">9</button>
                <button class="keyboard-key" onclick="sendKey('0')">0</button>
                <button class="keyboard-key wide" onclick="sendKey('backspace')">←</button>
            </div>
            <div class="keyboard-row">
                <button class="keyboard-key wide" onclick="sendKey('tab')">Tab</button>
                <button class="keyboard-key" onclick="sendKey('q')">Q</button>
                <button class="keyboard-key" onclick="sendKey('w')">W</button>
                <button class="keyboard-key" onclick="sendKey('e')">E</button>
                <button class="keyboard-key" onclick="sendKey('r')">R</button>
                <button class="keyboard-key" onclick="sendKey('t')">T</button>
                <button class="keyboard-key" onclick="sendKey('y')">Y</button>
                <button class="keyboard-key" onclick="sendKey('u')">U</button>
                <button class="keyboard-key" onclick="sendKey('i')">I</button>
                <button class="keyboard-key" onclick="sendKey('o')">O</button>
                <button class="keyboard-key" onclick="sendKey('p')">P</button>
            </div>
            <div class="keyboard-row">
                <button class="keyboard-key wide" onclick="sendKey('shift')">Shf</button>
                <button class="keyboard-key" onclick="sendKey('a')">A</button>
                <button class="keyboard-key" onclick="sendKey('s')">S</button>
                <button class="keyboard-key" onclick="sendKey('d')">D</button>
                <button class="keyboard-key" onclick="sendKey('f')">F</button>
                <button class="keyboard-key" onclick="sendKey('g')">G</button>
                <button class="keyboard-key" onclick="sendKey('h')">H</button>
                <button class="keyboard-key" onclick="sendKey('j')">J</button>
                <button class="keyboard-key" onclick="sendKey('k')">K</button>
                <button class="keyboard-key" onclick="sendKey('l')">L</button>
                <button class="keyboard-key wide" onclick="sendKey('enter')">↵</button>
            </div>
            <div class="keyboard-row">
                <button class="keyboard-key wide" onclick="sendKey('ctrl')">Ctr</button>
                <button class="keyboard-key" onclick="sendKey('z')">Z</button>
                <button class="keyboard-key" onclick="sendKey('x')">X</button>
                <button class="keyboard-key" onclick="sendKey('c')">C</button>
                <button class="keyboard-key" onclick="sendKey('v')">V</button>
                <button class="keyboard-key" onclick="sendKey('b')">B</button>
                <button class="keyboard-key" onclick="sendKey('n')">N</button>
                <button class="keyboard-key" onclick="sendKey('m')">M</button>
                <button class="keyboard-key" onclick="sendKey('.')">.</button>
                <button class="keyboard-key wide" onclick="sendKey('alt')">Alt</button>
                <button class="keyboard-key wide" onclick="sendKey('win')">Win</button>
            </div>
            <div class="keyboard-row">
                <button class="keyboard-key space" onclick="sendKey('space')">空格</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        const socket = io();
        let lastX = 0;
        let lastY = 0;
        let isScrolling = false;
        let touchStartTime = 0;
        let touchStartX = 0;
        let touchStartY = 0;
        let touchMoved = false;
        const SENSITIVITY = 2.5;  // 灵敏度系数
        let lastTapTime = 0;      // 记录上次点击时间
        let tapCount = 0;         // 点击次数计数
        const DOUBLE_TAP_DELAY = 300;  // 双击判定时间（毫秒）
        let isPlaying = false;    // 添加播放状态变量
        let isMuted = false;

        // 获取触摸板元素
        const touchpad = document.querySelector('.touchpad-area');

        // 获取播放/暂停按钮元素
        const playPauseButton = document.querySelector('.media-controls button:nth-child(2)');

        // 处理触摸开始事件
        touchpad.addEventListener('touchstart', function(e) {
            e.preventDefault();
            const touch = e.touches[0];
            touchStartTime = Date.now();
            touchStartX = touch.clientX;
            touchStartY = touch.clientY;
            lastX = touch.clientX;
            lastY = touch.clientY;
            touchMoved = false;
        });

        // 处理触摸移动事件
        touchpad.addEventListener('touchmove', function(e) {
            e.preventDefault();
            const touch = e.touches[0];
            const deltaX = (touch.clientX - lastX) * SENSITIVITY;
            const deltaY = (touch.clientY - lastY) * SENSITIVITY;
            
            // 如果是双指触摸，处理滚动
            if (e.touches.length === 2) {
                if (!isScrolling) {
                    isScrolling = true;
                }
                // 发送滚动事件
                socket.emit('mouse_scroll', { deltaY: Math.round(deltaY) });
            } else {
                // 单指触摸，移动鼠标
                if (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1) {  // 添加最小移动阈值
                    touchMoved = true;
                    socket.emit('mouse_move', {
                        x: Math.round(deltaX),
                        y: Math.round(deltaY)
                    });
                }
            }
            
            lastX = touch.clientX;
            lastY = touch.clientY;
        });

        // 处理触摸结束事件
        touchpad.addEventListener('touchend', function(e) {
            e.preventDefault();
            const touchDuration = Date.now() - touchStartTime;
            const currentTime = Date.now();
            
            // 如果是滚动操作，重置滚动状态
            if (isScrolling) {
                isScrolling = false;
                return;
            }
            
            // 如果触摸时间短且没有明显移动，处理点击
            if (touchDuration < 200 && !touchMoved) {
                // 检查是否是双击
                if (currentTime - lastTapTime < DOUBLE_TAP_DELAY) {
                    // 双击事件
                    socket.emit('mouse_click', { button: 'double' });
                    tapCount = 0;  // 重置点击计数
                    lastTapTime = 0;  // 重置最后点击时间
                } else {
                    // 可能是双击的第一次点击
                    lastTapTime = currentTime;
                    tapCount++;
                    
                    // 如果300ms内没有第二次点击，则视为单击
                    setTimeout(() => {
                        if (tapCount === 1) {
                            socket.emit('mouse_click', { button: 'left' });
                        }
                        tapCount = 0;
                    }, DOUBLE_TAP_DELAY);
                }
            }
        });

        // 处理按钮点击
        function handleClick(button) {
            socket.emit('mouse_click', { button: button });
        }

        // 处理媒体控制
        function handleMedia(action) {
            if (action === 'play_pause') {
                isPlaying = !isPlaying;  // 切换播放状态
                playPauseButton.textContent = isPlaying ? '播放' : '暂停';  // 更新按钮文本
                socket.emit('key_press', { key: 'media_play_pause' });
            } else if (action === 'next') {
                socket.emit('key_press', { key: 'media_next' });
            } else if (action === 'prev') {
                socket.emit('key_press', { key: 'media_previous' });
            }
        }

        // 处理电源控制
        function handlePower(action) {
            socket.emit('key_press', { key: action });
        }

        // 处理全屏
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        // 音量控制处理
        function handleVolume(action) {
            if (action === 'up') {
                socket.emit('key_press', { key: 'volume_up' });
            } else if (action === 'down') {
                socket.emit('key_press', { key: 'volume_down' });
            } else if (action === 'mute') {
                socket.emit('key_press', { key: 'volume_mute' });
            }
        }

        // 快进/后退处理
        function handleSeek(action) {
            if (action === 'forward') {
                socket.emit('key_press', { key: 'seek_forward' });
            } else if (action === 'backward') {
                socket.emit('key_press', { key: 'seek_backward' });
            }
        }

        // 防止页面滚动
        document.body.addEventListener('touchmove', (e) => {
            e.preventDefault();
        }, { passive: false });

        // 添加键盘相关函数
        function toggleKeyboard() {
            const keyboard = document.getElementById('keyboard');
            keyboard.classList.toggle('active');
        }
        
        function sendKey(key) {
            if (key.length === 1 && /[a-zA-Z0-9]/.test(key)) {
                // 如果是单个字母或数字，发送为文本
                socket.emit('key_press', { key: 'text:' + key });
            } else {
                // 其他按键直接发送
                socket.emit('key_press', { key: key });
            }
        }
        
        // 添加键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                toggleKeyboard();
            }
        });

        function toggleMute() {
            isMuted = !isMuted;
            const muteButton = document.getElementById('muteButton');
            muteButton.textContent = isMuted ? '取消静音' : '静音';
            socket.emit('key_press', { key: 'volume_mute' });
        }
    </script>
</body>
</html> 